
<template>
  <div class="home">
    <el-form :model="form" >
    <p>这个就需要手动粘贴Header了，需要自己去抓包拿Header参数</p>
       <el-form-item label="接口链接参数">
        <el-input v-model="form.url" placeholder="/bds/user/cell_comment/ 这个接口的数据" ></el-input>
       </el-form-item>
       <el-form-item label="密码">
        <el-input type="textarea" v-model="form.header" placeholder="密码" ></el-input>
       </el-form-item>
       <el-form-item>
        <el-button type="primary" @click="getPageData" :loading="loading">{{pageData.firstLoad?'尝试获取数据':pageData.hasMore?'下一页':'加载完了'}}</el-button>
         <el-button type="primary" :loading="loading" @click="deleteRow(dataList[0])">删除第一条</el-button>
       </el-form-item>
    </el-form>
    <el-table :data="dataList"  style="width: 100%" resizable :border="true">
      <el-table-column  label="资源类型"  >
        <template #default="scope">
          <span v-if="scope.row.comment_info">comment</span>
          <span v-else-if="scope.row.reply_info">reply</span>
        </template>
      </el-table-column>
      <el-table-column  label="资源标题"  >
        <template #default="scope">
          <span v-if="scope.row.comment_info">{{scope.row.comment_info.item.content}}</span>
          <span v-else-if="scope.row.reply_info">{{scope.row.reply_info.item.content}}</span>
        </template>
      </el-table-column>
      <el-table-column label="评论者"  width="100px" >
        <template #default="scope">
          <span v-if="scope.row.comment_info">{{scope.row.comment_info.user.name}}</span>
          <span v-else-if="scope.row.reply_info">{{scope.row.reply_info.user.name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="cell_id_str" label="评论ID" width="200px" />
      <el-table-column  label="评论内容"  >
        <template #default="scope">
          <span v-if="scope.row.comment_info">{{scope.row.comment_info.text}}</span>
          <span v-else-if="scope.row.reply_info">{{scope.row.reply_info.text}}</span>
        </template>
      </el-table-column>
      
      <el-table-column fixed="right" label="操作" width="150">
      <template #default="scope">
        <span >
          <el-button type="text" size="small" @click.prevent="deleteRow(scope.row)">删除</el-button>
        </span>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref,reactive } from 'vue'
import api from '@/api'

  

  const form = reactive({
    url: 'api_version=1&version_code=3.8.0&app_name=super&user_id=2000763890438029&device_id=1073561585369182&channel=App%20Store&count=20&resolution=1242*2688&aid=1319&recommend_disable=0&update_version_code=38080&ac=WIFI&os_version=14.3&direction=1&device_platform=iphone&iid=3897133175433613&device_type=iPhone%20XS%20Max',
    header: '{"Accept-Encoding": "gzip, deflate","Connection": "keep-alive","Cookie": "d_ticket=2c5451552d2b13d3073a1c9bc93bb1bd14603; n_mh=K1UOmfJvAssPuFoPuMclHp_nCuiafUKQQ4MiHKsfhvA; sessionid=793af8c8b825d2eb52b79db5be9ece89; sessionid_ss=793af8c8b825d2eb52b79db5be9ece89; sid_guard=793af8c8b825d2eb52b79db5be9ece89%7C1650180473%7C5184000%7CThu%2C+16-Jun-2022+07%3A27%3A53+GMT; sid_tt=793af8c8b825d2eb52b79db5be9ece89; uid_tt=6fdbfa884bbd1d32f41ede2b717f5e94; uid_tt_ss=6fdbfa884bbd1d32f41ede2b717f5e94; odin_tt=9d846ba85eba00be64ec0dda96726ee5a270baa806bcdb94d60e8ba11d9a72dddc9e375043900127b001ff10c2ec5659f9898f3ee9d75dadf9ff3f01947b4e6f3fde53ee176cc1c3d242b2f451882ad2; install_id=3897133175433613; ttreq=1$b7d58f1e582c9328cf603036cddb724846f4b5a1","Host": "is.snssdk.com","User-Agent": "Super 3.8.0 rv:3.8.0.80 (iPhone; iOS 14.3; zh_CN) Cronet","X-Argus": "CsijaPNhojisIw9L2GnFQuiHlhT3rL7rQL+W+W+T56fE2xoFZIBXvVbD7G10DAIfQslZLjYjhF6wiKtxSKyV9gni/0bSS9/kbl15NtP1BNPWWw8EnI/ohEke1rtaOoVO10hurfxKHbNPTJKl0GSS7RcH0IwRsDjYnn9xTrRoGQfRdF5oCn7u9TaKPEKt0/s8Qe+vDeeImyuyUPfAi2ZXMIsKyts4vGZXWfmgmNrbD39KcdAGlnoTEZT6HaoDzf3zgME=","X-Gorgon": "84040060200068a52ee7f68f5dd6f41a017d97ae859568be0a2b","X-Khronos": "1650260812","X-Ladon": "vsa4LJR195//1itN8uKIbAdTKMz00lvNp7N6hiX14BRBVYbu","X-SS-Cookie": "install_id=3897133175433613; ttreq=1$b7d58f1e582c9328cf603036cddb724846f4b5a1; odin_tt=9d846ba85eba00be64ec0dda96726ee5a270baa806bcdb94d60e8ba11d9a72dddc9e375043900127b001ff10c2ec5659f9898f3ee9d75dadf9ff3f01947b4e6f3fde53ee176cc1c3d242b2f451882ad2; sessionid=793af8c8b825d2eb52b79db5be9ece89; sessionid_ss=793af8c8b825d2eb52b79db5be9ece89; sid_guard=793af8c8b825d2eb52b79db5be9ece89%7C1650180473%7C5184000%7CThu%2C+16-Jun-2022+07%3A27%3A53+GMT; sid_tt=793af8c8b825d2eb52b79db5be9ece89; uid_tt=6fdbfa884bbd1d32f41ede2b717f5e94; uid_tt_ss=6fdbfa884bbd1d32f41ede2b717f5e94; d_ticket=2c5451552d2b13d3073a1c9bc93bb1bd14603; n_mh=K1UOmfJvAssPuFoPuMclHp_nCuiafUKQQ4MiHKsfhvA","X-SS-DP": "1319","passport-sdk-version": "5.13.3","sdk-version": "2","tt-request-time": "1650260813304","x-Tt-Token": "00793af8c8b825d2eb52b79db5be9ece8900f3b8d54c5a69a73eddd79465eb8f31ced928a1bfb96df5cfe097f465b8c9bb0af9f6a24e1c4b594765bd01e622d2b9fe105396d8db5c0f0a55e25345b279177627c64620a59f9586f9fd18a6c4be180d6-1.0.1","x-tt-trace-id": "00-3b35a7790d3d06608f0c05e8d0e80527-3b35a7790d3d0660-01","x-vc-bdturing-sdk-version": "2.0.0"}',
  })

  const pageData = reactive({
    pageNo:1,
    pageSize:20,
    firstLoad:true,
    hasMore:false
  })

  const dataList = ref([])
  const loading = ref(false)

  const getQueryVariable = (url ,variable)=>{
       var query = url;
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

  const getPageData = () =>{
    const app_name = getQueryVariable(form.url,'app_name')
    const aid = getQueryVariable(form.url,'aid')

    console.info(app_name)
    // 拉列表接口必要的参数  app_name count aid direction
    api.DeletePPXComment_getList({
      app_name:app_name,
      aid:aid,
      count:20,
      direction:1
    },JSON.parse(form.header)
    ).then((res:any)=>{
       console.info(res)
        pageData.firstLoad = false
        pageData.hasMore = res.data.cursor.has_more
       
        pageData.pageNo++
        dataList.value  = [...dataList.value,...res.data.cell_comments]
    })
  } 

  const deleteRow = (target:any) =>{

    console.info(target)

    // const app_name = getQueryVariable(form.url,'app_name')
    // const aid = getQueryVariable(form.url,'aid')
    //有Comment 和reply 区分
    if(target.comment_info){
      api.DeletePPXComment_deleteComment(`comment_id=${target.cell_id_str}`,JSON.parse(form.header)).then((res:any)=>{
        if(res.status_code == 0){
          ElMessage.success("删除成功")
          dataList.value = dataList.value.filter(el=>el != target)
        }else{
          ElMessage.error(res.message)
        }
      })

      
    }else{
      api.DeletePPXComment_deleteReply(`reply_id=${target.cell_id_str}`,JSON.parse(form.header)).then((res:any)=>{
        if(res.status_code == 0){
          ElMessage.success("删除成功")
          dataList.value = dataList.value.filter(el=>el != target)
        }else{
          ElMessage.error(res.message)
        }
      })


    }
  } 
  

  


</script>
<style lang="scss" scoped>
p{
  font-size: 14px;
}
</style>
